{% extends "base/base.html" %}
{% load static %}

{% block title %}
    <title>背单词</title>
{% endblock title %}

{% block css %}
    <link rel="stylesheet" href="{% static 'recite/css/recite.css' %}">
    <link rel="stylesheet" href="{% static 'recite/css/word.css' %}">
{% endblock css %}

{% block username %}
    <i class="glyphicon glyphicon-user"></i>
    {{ request.user }}
{% endblock %}

{% block sidebar %}

{% endblock sidebar %}

{% block content %}

    <div id="content" class="col-sm-12">
        <div class="title">
{#            <a href="url/forward" class="btn btn-link pull-left">上一个</a>#}
            <div class="word">
                <h4>{{ word.word }}</h4>
            </div>
            <a href="{% url 'recite' 'next' %}" class="btn btn-default pull-right">下一个</a>
        </div>


        <div class="means">
            <div class="cn-means">
                {{ word.cn_mean }}
            </div>

            <div class="en-means">
                {{ word.en_mean }}
            </div>
        </div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#sys" role="tab" data-toggle="tab">词典例句</a></li>
            <li role="presentation"><a href="#user" role="tab" data-toggle="tab">共享例句</a></li>
            <li role="presentation"><a href="#create" role="tab" data-toggle="tab">创建例句</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="sys">

                <div class="annotations">

                    {% for example in word_example %}
                        <div class="example">
                            <div class="annotation">
                                {{ example.annotation }}
                                <span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span>100</span>
                                <span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span>200</span>
                            </div>
                            <div class="translation">
                                {{ example.translation }}
                            </div>
                        </div>
                    {% endfor %}

                </div>

            </div>

            <div role="tabpanel" class="tab-pane" id="user">
                <div class="annotations">

                    {% if word_share_example %}
                        {% for example in word_share_example %}
                            <div class="example">
                                <div class="annotation">
                                    {{ example.annotation }}
                                    <span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span>100</span>
                                    <span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span>200</span>
                                </div>
                                <div class="translation">
                                    {{ example.translation }}
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        暂无数据
                    {% endif %}

                </div>
            </div>


            <div role="tabpanel" class="tab-pane" id="create">

                <div class="annotations">

                    <div class="example">
                            <form action="" method="post" role="form" class="form-horizontal">
                                <div class="form-group">
                                    <label for="annotation" class="col-sm-1 control-label">例句:</label>
                                    <div class="col-sm-10">
                                        <textarea name="annotation" class="form-control" id="annotation" rows="3"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="translation" class="col-sm-1 control-label">译文</label>
                                    <div class="col-sm-10">
                                        <textarea name="translation" class="form-control" id="translation" rows="3"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-offset-1 col-sm-10">
                                        <input type="checkbox" name="isshare" value="1"> 共享
                                    </div>
                                </div>

                                <div class="form-group">
                                    {% csrf_token %}
                                    <input type="hidden" name="from" value="example">
                                    <input type="submit" class="btn btn-default col-sm-offset-4">
                                </div>

                            </form>
                        </div>

                </div>

            </div>


        </div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#self" role="tab" data-toggle="tab">我的笔记</a></li>
            <li role="presentation"><a href="#shared" role="tab" data-toggle="tab">共享笔记</a></li>
            <li role="presentation"><a href="#add" role="tab" data-toggle="tab">添加笔记</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="self">
                <div class="annotations">

                    {% if word_user_notes %}
                        {% for note in word_user_notes %}
                            <div class="example">
                                <div class="annotation">
                                    {{ note.notes }}
                                    <span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span>100</span>
                                    <span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span>200</span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="example">
                            暂无数据
                        </div>
                    {% endif %}

                </div>

            </div>

            <div role="tabpanel" class="tab-pane" id="shared">
                <div class="annotations">

                    {% if word_share_notes %}
                        {% for note in word_share_notes %}
                            <div class="example">
                                <div class="annotation">
                                    {{ note.notes }}
                                    <span class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span>100</span>
                                    <span class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span>200</span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="example">
                            暂无数据
                        </div>
                    {% endif %}

                </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="add">
                <div class="annotations">
                    <div class="example">
                        <form class="form-group" action="" method="post">
                            <textarea name="notes" class="form-control" rows="3"></textarea>
                            <input type="checkbox" name="isshare" value="1" > 共享

                            <input type="hidden" name="from" value="note">
                            {% csrf_token %}
                            <input class="btn btn-default col-sm-offset-6" type="submit" value="添加" >
                        </form>
                    </div>
                </div>
            </div>

        </div>

    </div>

{% endblock content %}

